<!--
 * @Author: 黑白灰01 3193273703@qq.com
 * @Date: 2025-01-27 14:44:24
 * @LastEditors: 黑白灰01 3193273703@qq.com
 * @LastEditTime: 2025-02-03 18:48:30
 * @FilePath: /hei_picture_web/src/page/login/modal/LoginFrom.vue
 * @Description: 登录表单
-->
<template>
  <a-form
    :model="loginForm"
    @finish="handleLogin"
    class="login-form"
    v-if="activeModule === 'pwdLogin'"
  >
    <h3 class="login-title">密码登录</h3>
    <a-form-item
      name="userAccount"
      :rules="[
        { required: true, message: '请输入用户账号' },
        { min: 6, message: '用户账号长度至少为6位' },
      ]"
    >
      <a-input v-model:value="loginForm.userAccount" placeholder="用户账号">
        <template #prefix>
          <UserOutlined />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item
      name="userPassword"
      :rules="[
        { required: true, message: '请输入密码' },
        { min: 8, message: '密码长度至少为8位' },
      ]"
    >
      <a-input-password v-model:value="loginForm.userPassword" placeholder="密码">
        <template #prefix>
          <LockOutlined />
        </template>
      </a-input-password>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit" class="login-button" block> 登录 </a-button>
    </a-form-item>
    <a-form-item class="login-footer">
      <span>没有账号？立即</span>
      <a @click="gotoRegister"> 注册 </a>
    </a-form-item>
  </a-form>
  <a-form v-else :model="registerForm" @finish="handleRegister" class="login-form">
    <h3 class="login-title">注册</h3>
    <a-form-item
      name="userAccount"
      :rules="[
        { required: true, message: '请输入用户账号' },
        { min: 6, message: '用户账号长度至少为6位' },
      ]"
    >
      <a-input v-model:value="registerForm.userAccount" placeholder="用户账号">
        <template #prefix>
          <UserOutlined />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item
      name="userPassword"
      :rules="[
        { required: true, message: '请输入密码' },
        { min: 8, message: '密码长度至少为8位' },
      ]"
    >
      <a-input-password v-model:value="registerForm.userPassword" placeholder="密码">
        <template #prefix>
          <LockOutlined />
        </template>
      </a-input-password>
    </a-form-item>
    <a-form-item name="checkPassword" :rules="[{ required: true, message: '请确认密码' }]">
      <a-input-password v-model:value="registerForm.checkPassword" placeholder="确认密码">
        <template #prefix>
          <LockOutlined />
        </template>
      </a-input-password>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit" class="login-button" block> 注册 </a-button>
    </a-form-item>
    <a-form-item class="login-footer">
      <span>已有账号？立即</span>
      <a @click="gotoPwdLogin"> 登录 </a>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore'
import { useRouter } from 'vue-router'
import { userLoginUsingPost, userRegisterUsingPost } from '@/api/userController'
import { message } from 'ant-design-vue'
const router = useRouter()
const loginUserStore = useLoginUserStore()

const activeModule = ref('pwdLogin')
const gotoRegister = () => {
  activeModule.value = 'register'
}

const gotoPwdLogin = () => {
  activeModule.value = 'pwdLogin'
}

const loginForm = reactive<API.UserLoginRequest>({
  userAccount: '',
  userPassword: '',
})
const registerForm = reactive<API.UserRegisterRequest>({
  userAccount: '',
  userPassword: '',
  checkPassword: '',
})

const handleLogin = async (values: API.UserLoginRequest) => {
  try {
    // 这里调用登录接口
    const res = await userLoginUsingPost(values)
    if (res.data.code === 200) {
      loginUserStore.fetchLoginUserInfo()
      message.success('登录成功')
      router.push('/') // 登录成功后跳转到首页
    }
  } catch (error) {
    console.error('登录失败:', error)
  }
}

const handleRegister = async (values: API.UserRegisterRequest) => {
  try {
    const res = await userRegisterUsingPost(values)
    if (res.data.code === 200) {
      activeModule.value = 'pwdLogin'
      message.success('注册成功,请登录')
    }
  } catch (error) {
    console.error('注册失败:', error)
  }
}
</script>

<style scoped>
.login-form {
  width: 100%;
}

.login-button {
  height: 40px;
  font-size: 16px;
}

.login-title {
  text-align: center;
  font-size: 24px;
  color: #8153ff;
}
</style>
